<template>
  <view class="order_ticket">
    <view class="status">
      <view class="status_left">
        <image src="../../static/tabbar/order_s.png"></image>
        <text>{{ orderDetail.status | formatStatus }}</text>
      </view>
      <!-- 待支付 -->
      <view
        class="status_right"
        v-if="!payTimeout && orderDetail.status == 'CREATED'"
      >
        <text class="text">支付剩余时间</text>
        <text class="text">{{ time | formatSecond }}</text>
      </view>
      <view
        class="status_right"
        v-if="payTimeout && orderDetail.status == 'CREATED'"
        ><text class="text">订单已失效</text></view
      >
    </view>
    <view class="ticket">
      <image class="bg" src="../../static/images/ddtx_pic_card.png"></image>
      <view class="ticket_content">
        <view class="box_top">
          <view class="box_top_item">
            <view class="top omitted">{{
              orderDetail.departCityName || ""
            }}</view>
            <view
              class="bottom omitted"
              :class="{ small_size: orderDetail.departCityName.length > 7 }"
              >{{ orderDetail.departStationName || "" }}</view
            >
          </view>
          <view class="box_top_item">
            <view class="top">{{
              (orderDetail.departDate + " " + orderDetail.departTime)
                | formatDateTime
            }}</view>
            <view class="bottom"
              >{{ orderDetail.departDate | formatDateChinese }}
              {{ orderDetail.departDate | formatDayN3d }}</view
            >
          </view>
          <view class="box_top_item">
            <view class="top text_right omitted">武汉</view>
            <view
              class="bottom text_right omitted"
              :class="{ small_size: orderDetail.destStationName.length > 7 }"
              >{{ orderDetail.destStationName }}</view
            >
          </view>
        </view>
        <view class="box_bottom">
          <view class="box_bottom_item">
            <image class="img" src="../../static/images/lx_icon_cc.png"></image>
            <text>车次{{ orderDetail.busNo || orderDetail.schCode }}</text>
          </view>
          <view class="box_bottom_item text_right">
            <image class="img" src="../../static/images/lx_icon_lc.png"></image>
            <text>共计{{ orderDetail.distance }}公里</text>
          </view>
          <view class="box_bottom_item text_right">
            <image class="img" src="../../static/images/lx_icon_sj.png"></image>
            <text>大约2小时</text>
          </view>
        </view>
      </view>
      <view class="line"></view>
    </view>
    <view class="personnel">
      <view class="invoice"></view>
      <view class="list" v-if="orderDetail.tickets.length">
        <view
          class="item"
          v-for="item in orderDetail.tickets"
          :key="item.phone"
        >
          <view
            class="top"
            @click="passengerClick"
            data-type="delete"
            :data-item="item"
          >
            <text class="name">{{ item.passenger.name }}</text>
            <text class="type">{{
              item.passenger.passengerType | formatTicketType
            }}</text>
            <text class="itemstatus" :style="{ color: calc(item.status) }">{{
              ticketStatus(item.status)
            }}</text>
          </view>
          <view class="bottom">
            <view class="cert_no"
              >身份证:{{ item.passenger.certNo | formatCertNo }}</view
            >
            <view class="phone">手机号:{{ item.passenger.phone }}</view>
          </view>
        </view>
      </view>
      <view class="detail">
        <view class="detail_item">
          <text class="item-left">订单号</text>
          <text class="item-right">{{
            orderDetail.orderNo || orderDetail.outTradeNo || ""
          }}</text>
        </view>
        <view class="detail_item">
          <text class="item-left">总额</text>
          <text class="item-right">￥{{ orderDetail.amount || "" }}</text>
        </view>
        <!-- 				<view class="">
					<text>成人票</text>
					<text>￥123456</text>
				</view>
				<view class="">
					<text>服务费</text>
					<text></text>
				</view> -->
      </view>
      <!-- <view class="notes">购票、取票、退款需知</view> -->
    </view>
    <view class="bottom_place" v-if="orderDetail.status == 'CREATED'">
      <view class="bottom_place_left">
        <text class="item">订单总额</text>
        <text class="item">￥</text>
        <text class="item">{{ orderDetail.amount || "" }}</text>
      </view>
      <view class="bottom_place_right">
        <view class="detail"
          ><text class="detail_text" @click="cancelOrder">取消订单</text></view
        >
        <view
          class="btn_wraper"
          v-if="!payTimeout && orderDetail.status == 'CREATED'"
          ><view class="btn" @click="ordersPay">立即支付</view></view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// components
import uniIcons from "@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue";
import uniPopup from "@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue";
// api
import {
  $userOrderDetail,
  $submitOrder,
  $ordersSale,
  $ordersPay,
  $ordersClose,
} from "../../service/index";
// utils
import { myShowToast, myShowModal } from "../../utils/utils.js";
export default {
  components: { uniIcons, uniPopup },
  data() {
    return {
      popupFlag: false, // 是否打开了明细
      timer: null,
      time: 900, // 剩余支付时间 900s
      payTimeout: false, // 支付超时
      currentDate: this.$dayjs().format("YYYY-MM-DD"),
    };
  },
  computed: {
    ...mapState(["info", "orderDetail"]),
  },
  filters: {
    formatSecond(value) {
      // 倒计时格式化
      const min = Math.floor(value / 60);
      const sec = value % 60;
      const secNew = sec < 10 ? "0" + sec : sec;
      return min + ":" + secNew;
    },
    formatStatus(val) {
      // 订单状态格式化
      const statuss = {
        CREATED: "待支付", // 新创建  -- 立即支付  删除订单（撤销）
        SUCCESS: "已支付", //  退款按钮
        CANCELED: "订单已删除", // 已撤销
        REFUNDED: "已退款",
        PART_REFUND: "部分退款",
        FAIL: "失败",
      };
      return statuss[val] || "";
    },

    formatTicketType(val) {
      const types = {
        ADULT: "成人票",
        CHILD: "儿童票",
        STUDENT: "学生票",
        SOLDIER: "军人票",
      };
      return types[val] || "未知";
    },
    formatCertNo(val) {
      const len = val.length;
      return val.substring(0, 4) + " **** **** " + val.substring(len - 4, len);
    },
  },
  methods: {
    // 订单详情查询
    // userOrderDetail(id) {
    // 	$userOrderDetail({}, id)
    // 		.then(res => {
    // 			const data = res.data;
    // 			console.log(data);
    // 			if (!data.success) {
    // 				myShowModal(data.message || '网络错误');
    // 				return;
    // 			}
    // 			this.time = 30;
    // 			this.timer = setInterval(() => {
    // 				if (this.time == 0) {
    // 					clearInterval(this.timer);
    // 					return;
    // 				}
    // 				this.time--;
    // 			}, 1000);
    // 		})
    // 		.catch(err => {
    // 			console.log(err);
    // 		});
    // }
    calc(val) {
      if (val == "REFUNDED") {
        return "#8B96AC";
      } else {
        if (this.orderDetail.status == "CREATED") {
          return "#F22424";
        } else {
          return "#2868FE";
        }
      }
    },
    ticketStatus(val) {
      console.log(this.orderDetail);
      if (val == "REFUNDED") {
        return "已退款";
      } else {
        if (this.orderDetail.status == "CREATED"||this.orderDetail.status == "CANCEL") {
          return "待支付";
        } else {
          return "已支付";
        }
      }
    },
    // 支付
    ordersPay() {
      const id = this.orderDetail.id;
      $ordersPay({}, id)
        .then((res) => {
          const data = res.data;
          console.log(data);
          if (!data.success) {
            myShowModal(data.message || "网络错误");
            return;
          }
          const payParams = data.content || {};
          // 获取参数 拉起支付
          uni.requestPayment({
            provider: "wxpay",
            timeStamp: payParams.timeStamp,
            nonceStr: payParams.nonceStr,
            package: payParams.package_str,
            signType: payParams.signType,
            paySign: payParams.paySign,
            success: (res) => {
              console.log("success:" + JSON.stringify(res));
              myShowToast("购买成功");
              uni.navigateBack({
                delta: 1,
              });
            },
            fail: (err) => {
              console.log("fail:" + JSON.stringify(err));
              myShowModal("fail" + JSON.stringify(err));
            },
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 售票
    // ordersSale(id) {
    //   $ordersSale({}, id)
    //     .then((res) => {
    //       const data = res.data;
    //       console.log(data);
    //       if (!data.success) {
    //         myShowModal(data.message || "网络错误");
    //         return;
    //       }
    //       myShowToast("购买成功");
    //       uni.navigateBack({
    //         delta: 1,
    //       });
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    // 取消订单
    cancelOrder() {
      const id = this.orderDetail.id;
      $ordersClose({}, id)
        .then((res) => {
          const data = res.data;
          console.log(data);
          if (!data.success) {
            myShowModal(data.message || "网络错误");
            return;
          }
          myShowToast("取消成功");
          uni.navigateBack({
            delta: 1,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  onShow() {
    console.log(this.orderDetail);
    const detail = this.orderDetail;
    if (detail.status == "CREATED") {
      // 新建订单才需要支付倒计时
      const createTime = this.$dayjs(detail.createTime).unix(); // 订单创建时间
      const nowTime = this.$dayjs().unix(); // 当前时间
      const time = nowTime - createTime;
      console.log(time, this.time);
      if (time >= this.time) {
        this.payTimeout = true;
      } else {
        this.time = 900 - time || 0;
        this.timer = setInterval(() => {
          if (this.time == 0) {
            this.timer && clearInterval(this.timer);
            this.payTimeout = true;
            return;
          }
          this.time--;
        }, 1000);
      }
    }
  },
  onHide() {
    this.timer && clearInterval(this.timer);
  },
};
</script>

<style lang="scss">
page {
  background-color: #f4f6f9;
}
.order_ticket {
  position: relative;
  .status {
    height: 101rpx;
    line-height: 101rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx 10rpx 40rpx;
    .status_left {
      image {
        width: 48rpx;
        height: 48rpx;
        vertical-align: -10rpx;
        margin-right: 20rpx;
      }
      text {
        font-size: 36rpx;
        font-weight: 800;
        color: rgba(25, 102, 255, 1);
      }
    }
    .status_right {
      .text {
        font-size: 24rpx;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
      }
      .text:last-child {
        font-size: 48rpx;
        font-weight: blod;
      }
    }
  }
  .ticket {
    margin: 0 auto;
    width: 710rpx;
    height: 268rpx;
    position: relative;
    z-index: 99;
    .bg {
      width: 710rpx;
      height: 268rpx;
    }
    .ticket_content {
      position: absolute;
      top: 0;
      left: 0;
      width: 710rpx;
      .box_top {
        display: flex;
        justify-content: space-between;
        padding: 0 28rpx 45rpx 28rpx;
        color: rgba(255, 255, 255, 1);
        .box_top_item {
          width: 30%;
          // word-wrap: break-word;
          // white-space: normal;
          // word-break: break-all;
        }
        .top {
          font-size: 36rpx;
          font-weight: 800;
          line-height: 101rpx;
        }
        .bottom {
          font-size: 28rpx;
          font-weight: 500;
        }
        .box_top_item:nth-child(2) {
          text-align: center;
          width: 25%;
          .bottom {
            height: 36rpx;
            line-height: 36rpx;
            background: rgba(0, 0, 0, 0.12);
            border-radius: 14rpx;
            font-size: 20rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            opacity: 0.8;
          }
        }
      }
      .box_bottom {
        display: flex;
        justify-content: space-between;
        padding: 0 28rpx 0 25rpx;
        .box_bottom_item {
          width: 33.3%;
          padding-top: 28rpx;
          .img {
            width: 36rpx;
            height: 36rpx;
            display: inline-block;
            margin-right: 7rpx;
          }
          text {
            display: inline-block;
            font-size: 24rpx;
            height: 36rpx;
            line-height: 36rpx;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            vertical-align: 10rpx;
          }
        }
      }
    }
    .line {
      width: 645rpx;
      border-bottom: 2rpx dashed #d1d7e1;
      position: absolute;
      top: 188rpx;
      left: 33rpx;
    }
  }
  .personnel {
    margin: 40rpx auto 0;
    width: 710rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(230, 235, 244, 0.8);
    border-radius: 8rpx;
    padding-top: 28rpx;
    .list {
      padding: 0 28rpx;
      .item {
        border-bottom: 1rpx solid #d1d7e1;
        position: relative;
        .top {
          padding: 24rpx 0 14rpx 0;
          height: 28rpx;
          .name {
            font-size: 28rpx;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            margin-right: 29rpx;
          }
          .type {
            height: 28rpx;
            line-height: 28rpx;
            display: inline-block;
            border: 1rpx solid rgba(130, 141, 162, 1);
            border-radius: 4rpx;
            font-size: 20rpx;
            padding: 0 7rpx;
            font-weight: 500;
            color: rgba(130, 141, 162, 1);
            vertical-align: 2rpx;
          }
          .itemstatus {
            position: absolute;
            top: 24rpx;
            font-size: 28rpx;
            font-weight: bold;
            right: 0;
          }
        }
        .bottom {
          line-height: 30rpx;
          padding: 0 0 39rpx 0;
          display: flex;
          justify-content: space-between;
          .cert_no {
            display: inline-block;
            font-size: 20rpx;
            font-weight: 500;
            color: rgba(139, 150, 172, 1);
            margin-right: 46rpx;
          }
          .phone {
            display: inline-block;
            text-align: right;
            font-size: 20rpx;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: rgba(139, 150, 172, 1);
          }
        }
      }
    }
    .detail {
      padding: 45rpx 28rpx;
      .detail_item {
        line-height: 80rpx;
        .item-left {
          display: inline-block;
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(139, 150, 172, 1);
          margin-right: 30rpx;
          min-width: 130rpx;
        }
        .item-right {
          font-size: 28rpx;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
  }
  .bottom_place {
    z-index: 9999;
    position: fixed;
    bottom: 0;
    width: 670rpx;
    height: 108rpx;
    line-height: 108rpx;
    padding: 0 40rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -1rpx 0px 0px rgba(209, 215, 225, 1);
    display: flex;
    justify-content: space-between;
    .bottom_place_left {
      .item {
        font-size: 24rpx;
        font-weight: 500;
        color: rgba(139, 150, 172, 1);
      }
      .item:nth-child(2) {
        color: #fe6f29;
      }
      .item:last-child {
        color: #fe6f29;
        font-size: 48rpx;
        font-weight: bold;
      }
    }
    .bottom_place_right {
      .detail {
        display: inline-block;
        margin-right: 17rpx;
        .detail_text {
          font-size: 24rpx;
          color: #8b96ac;
          padding-right: 6rpx;
        }
        .icon_wraper {
          display: inline-block;
          vertical-align: -2rpx;
          transition: all 0.3s linear;
        }
        .icon_wraper--active {
          transition: all 0.3s linear;
          transform: rotate(180deg);
        }
      }
      .btn_wraper {
        display: inline-block;
        width: 212rpx;
        height: 76rpx;
        line-height: 76rpx;
        background: linear-gradient(
          90deg,
          rgba(254, 112, 42, 1) 0%,
          rgba(255, 130, 7, 1) 100%
        );
        border-radius: 38rpx;
      }
    }
  }
  .ticket_detail {
    height: 300rpx;
    background: #ffffff;
    padding-bottom: 108rpx;
  }
}
</style>
